<template>
  <div class="buyerEchartBar">
    <div style="width: 100%;height: 400px" id="myEchartBar"></div>
  </div>
</template>

<script>
    export default {
        name: "BuyerEchartBar",
        mounted() {
            let options = {
                title: {
                    text: '出口趋势',
                    textStyle: {
                        color: '#435B77',
                        fontWeight: 'normal'
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    x: 'left',
                    top: '0',
                    left:'10%',
                    data: ['出口次数', '出口金额']
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        left:'0'
                    }
                ],
                series: [
                    {
                        name: '出口次数',
                        type: 'bar',
                        data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                        itemStyle: {color: '#B4D1E1'}
                    },
                    {
                        name: '出口金额',
                        type: 'bar',
                        data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                        itemStyle: {color: '#FCD9DD'}
                    },
                ]
            };
            this.myChart = this.$echarts.init(document.getElementById('myEchartBar'));
            this.myChart.setOption(options)
        }
    }
</script>

<style scoped>

</style>
